<!--
 * @Author: 胡晓星
 * @Date: 2024-08-08 11:51:57
 * @LastEditors: 491256909@qq.com
 * @LastEditTime: 2025-08-12 17:03:48
 * @FilePath: \src\pages\team\detail.vue
 * @Description: 
-->
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { pointsData } from 'mock/pointsData'
const route = useRoute();
const myId = route.query.id;
console.log(myId);
definePage({
  name: 'detail',
  meta: {
    level: 2,
    title: '🧡 球队详情',
    i18n: 'home.teamDetail',
  },
})
function getTeamData(id) {
  if (!id) return;
  let _item = {
    groupPhoto: '',
    name: '',
    playerList:<any>[],
  }
  for (let key in pointsData) {
    pointsData[key].find((item) => { 
      if (item.id == id) { 
        _item = item
      }
    });
  }
  return _item
}
const teamData = getTeamData(myId);
console.log(teamData);

</script>

<template>
  <Container>
    <div class="data-content">
      <van-image
        width="100%"
        height="12rem"
        fit="contain"
        :src="teamData?.groupPhoto"
      />
      <!-- <div class="team-info">
        <p class="team-name">{{ teamData?.name }}</p>
        <van-row class="info-header">
            <van-col span="6">阵容</van-col>
            <van-col span="3">号码</van-col>
            <van-col span="7">位置</van-col>
            <van-col span="4">身高(cm)</van-col>
            <van-col span="4">体重(kg)</van-col>
            
          </van-row>
          <van-row class="info-body" v-for="item in teamData?.playerList" :key="item.number">
            <van-col span="6">{{item.name}}</van-col>
            <van-col span="3">{{item.number}}</van-col>
            <van-col span="7">{{item.position}}</van-col>
            <van-col span="4">{{item.height}}</van-col>
            <van-col span="4">{{item.weight}}</van-col>
          </van-row>
      </div> -->
    </div>
  </Container>
</template>

<style lang="less" scoped>
.data-content {
  .team-info{
    width: 100%;
    margin: 0 auto;
    .team-name{
      font-size: 18px;
      font-weight: 600;
      color: #333;
      text-align: center;
    }
    .info-header{
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      padding: 6px 0;
      border-bottom: 1px solid #eee;
      background: #eee;
      text-align: center;
    }
    .info-body{
      text-align: center;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid #eee;
      .van-col:first-child{
        border-right: 1px solid #eee;
        padding: 8px 0;
      }
    }
  }
  .van-image{
    margin: 0 auto;
  }
 
}
</style>